<template>
	<view class="reviewed-coupon-detail">
		<view class="coupon-detail-item">
			<view class="title">车主信息</view>
			<view class="info-item-box">
				<view class="info-item">
					<view class="item-label">车主姓名</view>
					<view class="item-value">Ed sheeran</view>
				</view>
				<view class="info-item">
					<view class="item-label">车牌号</view>
					<view class="item-value">湘N090SC</view>
				</view>
			</view>
		</view>

		<view class="coupon-detail-item">
			<view class="title">卡券信息</view>
			<view class="info-item-box">
				<view class="info-item">
					<view class="item-label">卡卷类型</view>
					<view class="item-value coupon-type">抵扣劵</view>
				</view>
				<view class="info-item">
					<view class="item-label">卡劵名称</view>
					<view class="item-value">轮胎买3送1活动劵</view>
				</view>
				<view class="info-item">
					<view class="item-label">适用范围</view>
					<view class="item-value">轮胎使用</view>
				</view>
				<view class="info-item">
					<view class="item-label">生效时间</view>
					<view class="item-value">2022-11-31 至 2022-12-31</view>
				</view>
				<view class="info-item">
					<view class="item-label">发放时间</view>
					<view class="item-value">2022-12-01</view>
				</view>
				<view class="info-item">
					<view class="item-label">提交人</view>
					<view class="item-value">Lina</view>
				</view>
				<view class="info-item">
					<view class="item-label">提交时间</view>
					<view class="item-value">2022-11-31</view>
				</view>
				<view class="info-item">
					<view class="item-label">提交原因</view>
					<view class="item-value">卡劵发放错误</view>
				</view>
			</view>
		</view>

		<view class="btn-box">
			<view class="cancel">拒绝</view>
			<view class="agree">同意</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.reviewed-coupon-detail {
		.coupon-detail-item {
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
			padding: 15px 20px;
			margin: 15px 20px 0 20px;

			.title {
				font-size: 16px;
				color: rgba(0, 0, 0, 1);
				font-weight: 500;
			}

			.info-item-box {
				margin-top: 20px;

				.info-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 15px;

					.item-label {
						font-size: 14px;
						color: rgba(0, 0, 0, 0.30);
					}

					.item-value {
						font-size: 14px;
						color: rgba(0, 0, 0, 0.80);

						&.coupon-type {
							color: rgba(255, 165, 61, 1);
							font-weight: 500;
						}
					}
				}
			}
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20px 20px;

			.cancel {
				width: 48%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				border: 1px solid rgba(255, 165, 61, 1);
				color: rgba(255, 165, 61, 1);
				font-size: 16px;
				border-radius: 40px;
				font-size: 16px;
			}

			.agree {
				width: 48%;
				height: 44px;
				line-height: 44px;
				text-align: center;
				background-color: rgba(255, 165, 61, 1);
				box-shadow: inset 0px 4px 7px 0px rgba(255, 255, 255, 0.33);
				border-radius: 40px;
				font-size: 16px;
				color: #fff;
			}
		}
	}
</style>
